<template>
  <m-table
    :data="tableData"
    :options="options"
    element-loading-text="加载中..."
    :element-loading-spinner="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="rgba(122, 122, 122, 0.8)"
    edit-icon="bottom"
    isEditRow
    v-model:editRowIndex="editRowIndex"
    @check="check"
    @close="close"
    pagination
    :total="total"
    :currentPage="current"
    :pageSize="pageSize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
    <!-- 时间 -->
    <template #date="{ scope }">
      <el-icon-timer></el-icon-timer>
      {{ scope.row.date }}
    </template>

    <!-- 名字列 的 特殊实现 -->
    <template #name="{ scope }">
      <el-popover effect="light" trigger="hover" placement="top" width="auto">
        <template #default>
          <div>name: {{ scope.row.name }}</div>
          <div>address: {{ scope.row.address }}</div>
        </template>
        <template #reference>
          <el-tag>{{ scope.row.name }}</el-tag>
        </template>
      </el-popover>
    </template>

    <!-- 操作列 -->
    <template #action="{ scope }">
      <el-button type="primary" size="small" @click="edit(scope)"
        >编辑</el-button
      >
      <el-button type="danger" size="small" @click="remove(scope)"
        >删除</el-button
      >
    </template>

    <!-- <template #editCell="{ scope }">
      <div style="display: flex; margin-left: 5px">
        <el-button type="primary" size="small" @click="check">确定</el-button>
        <el-button @click="close" size="small">关闭</el-button>
      </div>
    </template> -->

    <!-- 操作类 - 编辑时 -->
    <template #editRow="{ scope }">
      <el-button type="warning" size="small">确定</el-button>
      <el-button type="info" size="small">取消</el-button>
    </template>
  </m-table>
</template>

<script setup lang="ts">
import mTable from "@/components/table/src/table.vue";
import { TableOptions } from "components/table/src/types.ts";
import { onMounted, ref } from "vue";
import axios from "axios";
import { ta } from "element-plus/es/locales.mjs";

interface TableData {
  date: string;
  name: string;
  address: string;
}

let tableData = ref<TableData[]>([]);

//分页
let current = ref<number>(1);
let pageSize = ref<number>(10);
let total = ref<number>(0);

let getData = () => {
  console.log("axios", current.value, pageSize.value);
  axios
    .post("/api/list", {
      current: current.value - 1,
      pageSize: pageSize.value,
    })
    .then((res: any) => {
      console.log("tableview axios", res.data);
      tableData.value = res.data.data.rows;
      total.value = res.data.data.total;
    });
};

let handleSizeChange = (val: number) => {
  pageSize.value = val;
  current.value = 1;
  getData();
};
let handleCurrentChange = (val: number) => {
  current.value = val;
  getData();
};
onMounted(() => {
  getData();
});

// setTimeout(() => {
//   tableData.value = [
//     {
//       date: "2016-05-03",
//       name: "Tom",
//       address: "No. 189, Grove St, Los Angeles",
//     },
//     {
//       date: "2016-05-02",
//       name: "Tom",
//       address: "No. 189, Grove St, Los Angeles",
//     },
//     {
//       date: "2016-05-04",
//       name: "Tom",
//       address: "No. 189, Grove St, Los Angeles",
//     },
//     {
//       date: "2016-05-01",
//       name: "Tom",
//       address: "No. 189, Grove St, Los Angeles",
//     },
//   ];
// }, 0);

let options: TableOptions[] = [
  {
    label: "日期",
    prop: "date",
    align: "center",
    slot: "date",
    editable: true,
    // width:'200px'
  },
  {
    label: "姓名",
    prop: "name",
    align: "center",
    slot: "name",
  },
  {
    label: "地址",
    prop: "address",
    align: "center",
    editable: true,
  },
  {
    label: "操作",
    prop: "action",
    align: "center",
    action: true,
  },
];

let editRowIndex = ref<string>("");

let edit = (scope: any) => {
  console.log("父组件编辑", scope);
  editRowIndex.value = "edit";
};

let remove = (scope: any) => {
  console.log("父组件删除", scope);
};

let check = (scope: any) => {
  console.log("父组件", scope);
  editRowIndex.value = "edit";
};

let close = (scope: any) => {
  console.log("父组件", scope);
  editRowIndex.value = "remove";
};

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
</script>

<style scoped lang="scss">
svg {
  width: 1em;
  height: 1em;
  position: relative;
  top: 2px;
  margin-left: 4px;
  transition: all 0.25s linear;
}
</style>
